import {
  downloadGeneratorByIdUsingGet,
  getGeneratorVoByIdUsingGet,
} from '@/services/backend/generatorController';
import { useModel, useParams } from '@@/exports';
import { PageContainer } from '@ant-design/pro-components';

import { COS_HOST } from '@/constants';
import AuthorInfo from '@/pages/Generator/Detail/components/AuthorInfo';
import FileConfig from '@/pages/Generator/Detail/components/FileConfig';
import ModelConfig from '@/pages/Generator/Detail/components/ModelConfig';
import {DownloadOutlined, EditOutlined} from '@ant-design/icons';
import { Button, Card, Col, Image, message, Row, Space, Tabs, Tag, Typography } from 'antd';
import { saveAs } from 'file-saver';
import moment from 'moment';
import { useEffect, useState } from 'react';
import {Link} from "umi";

export default () => {
  const { id } = useParams();
  const [loading, setLoading] = useState<boolean>(false);
  const [data, setData] = useState<API.GeneratorVO>({});
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState ?? {};
  const my= currentUser?.id === data?.userId;

  const loadData = async () => {
    if (!id) {
      return;
    }
    setLoading(true);
    try {
      const res = await getGeneratorVoByIdUsingGet({
        id: id,
      });
      setData(res.data ?? {});
    } catch (e: any) {
      message.error('获取失败:' + e.message);
    }
    setLoading(false);
  };
  useEffect(() => {
    if (!id) {
      return;
    }
    loadData();
  }, [id]);
  const tagListView = (tags: string[] | undefined) => {
    if (!tags) return;
    return (
      <div style={{ marginBottom: 8 }}>
        {tags.map((item, index) => (
          <Tag key={index}>{item}</Tag>
        ))}
      </div>
    );
  };
  const downloadButton = data.distPath && currentUser && (
    <Button
      icon={<DownloadOutlined />}
      onClick={async () => {
        const blob = await downloadGeneratorByIdUsingGet(
          {
            id,
          },
          {
            responseType: 'blob',
          },
        );
        const fullPath = COS_HOST + data.distPath;
        saveAs(blob, fullPath.substring(fullPath.lastIndexOf('/') + 1));
      }}
    >
      下载
    </Button>
  );
const  editButton=(my||"admin"===currentUser?.userRole)&&(

    <Link to={`/generator/add?id=${data.id}`}>
      <Button icon={<EditOutlined />} >
        编辑
      </Button>
    </Link>

);
  return (
    <PageContainer title={<></>} loading={loading}>
      <Card>
        <Row justify="space-between" gutter={[32, 32]}>
          <Col flex={'auto'}>
            <Space size={'large'} align={'center'}>
              <Typography.Title level={4}>{data.name}</Typography.Title>
              {tagListView(data.tags)}
            </Space>
            <Typography.Paragraph>{data.description}</Typography.Paragraph>
            <Typography.Paragraph type={'secondary'}>
              创建时间：{moment(data.createTime).format('YYYY-MM-DD HH:mm:ss')}
            </Typography.Paragraph>
            <Typography.Paragraph type={'secondary'}>
              基础包：{data.basePackage}
            </Typography.Paragraph>
            <Typography.Paragraph type={'secondary'}>版本：{data.version}</Typography.Paragraph>
            <Typography.Paragraph type={'secondary'}>作者：{data.author}</Typography.Paragraph>
            <div style={{ marginBottom: 24 }}></div>
            <Space size={'middle'}>
              <Link to={`/generator/use/${data.id}`}>
              <Button type={'primary'}>立即使用</Button>
              </Link>
              {downloadButton}
              {editButton}
            </Space>
          </Col>
          <Col flex="320px">
            <Image src={data.picture}></Image>
          </Col>
        </Row>
      </Card>
      <div style={{ marginBottom: 24 }}></div>
      <Card>
        <Tabs
          size="large"
          defaultActiveKey={'fileConfig'}
          onChange={() => {}}
          items={[
            {
              key: 'fileConfig',
              label: '文件配置',
              children: <FileConfig data={data} />,
            },
            {
              key: 'modelConfig',
              label: '模型配置',
              children: <ModelConfig data={data} />,
            },
            {
              key: 'userInfo',
              label: '作者信息',
              children: <AuthorInfo data={data} />,
            },
          ]}
        />
      </Card>
    </PageContainer>
  );
};
